<template>
  <div class="desc_index">
    <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" />
    <div class="order_details_div">
      <van-image
        fit="cover"
        position="center"
        width="20vw"
        height="20vw"
        :src="order.shops_avatar_url"
        class="avatar_url"
        @click="shops_desc(order.shops)"
      >
        <template v-slot:error>加载失败</template>
      </van-image>
      <div class="order_details_desc">
        <div class="order_details_title">
          <div
            class="van-ellipsis"
            style="max-width: calc(100% - 25vw); float: left"
          >
            {{ order.shops_name }}
          </div>
          <span style="max-width: 25vw; color: rgb(238, 10, 36); float: right">
            {{ order.total_amount }}￥
          </span>
        </div>
        <div class="order_details_desc_data">
          <div class="zhifubao_div">
            支付方式：{{ order.pay_method_name }}
          </div>
          数量 {{ order.sum }} 个
          <span style="float: right">{{ order.pay_state_name }}</span>
          <br />
          <span v-if="order.pay_state == 2 || order.pay_state == 3">
            下单时间 {{ datetime(order.pay_time) }}
          </span>
        </div>
      </div>
    </div>
    <div class="order_details_content">
      <div class="order_details_remark_div" v-if="order.remark">
        备注
        <div class="order_details_remark_data">
          {{ order.remark }}
        </div>
      </div>

      <div class="order_details_goods_list">
        <div
          class="order_details_goods_show"
          v-for="(item, i) in goods_list"
          :key="i"
        >
          <img :src="item.image" class="order_details_goods_image" />
          <div class="order_details_goods_desc">
            <div class="van-ellipsis">
              {{ item.name }}
            </div>
            <div class="order_details_goods_desc_data">
              <span style="color: #ee0a24">
                {{ item.order.sum }} X {{ item.price }}￥
              </span>
              <span style="color: #ee0a24; float: right"
                >{{ item.order.sum_price }}￥</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { onClickLeft, datetime } from "../../utlis/utils";
export default {
  data() {
    return {
      onClickLeft,
      datetime,
      isloading: false,
      order_id: this.$route.query.order_id,
      order: [],
      goods_list: [],
    };
  },

  methods: {
    // 获取订单详情
    submit: function () {
      this.isloading = true;
      this.myaxios(this.host + "shops/order/" + this.order_id + '/', "get", {
        user_id: localStorage.getItem("id"),
      }).then((data) => {
        console.log(data)
        console.log("order-------", data.order);
        console.log("goods_list-----------", data.goods_list);
        if (data.errcode == 0) {
          this.$toast.success(data.msg);
          this.order = data.order;
          this.goods_list = data.goods_list;
        } else {
          this.$toast.fail(data.msg);
        }
      });
    },
  },
  created() {
    this.submit();
  },
};
</script>

<style>

.order_details_div{
  padding: 3vw;
  width: calc(100% - 6vw);
  height: 22vw;
  background-color: white;
  border-top: 1px solid #ebedf0;
  border-bottom: 1px solid #ebedf0;
}
.order_details_content{
  width: calc(100%);
  height: calc(100vh - 28vw - 99px);
  overflow-x: hidden;
  overflow-y: scroll;
}
.order_details_remark_div{
  padding: 3vw;
  width: calc(100% - 6vw);
  height: auto;
  background-color: white;
  border-bottom: 1px solid #ebedf0;
}
.order_details_remark_data{
  padding-left: 10vw;
  color: #969799;
  line-height: 4vw;
  font-size: 3vw;
}

.order_details_desc{
  float: left;
  padding-left: 3vw;
  width: calc(100% - 23vw);
}
.order_details_title{
  height: 5vw;
}
.order_details_desc_data{
  margin-top: 1vw;
  color: #969799;
  line-height: 4vw;
  font-size: 3vw;
}
.zhifubao_div{
  height: 6vw;
}
.zhifubao_img{
  float: left;
  width: 5vw;
  height: 5vw;
}

.order_details_goods_list{
  width: calc(100%);
  height: auto;
}
.order_details_goods_show{
  padding: 3vw;
  /* width: calc(100% - 6vw); */
  min-height: 22vw;
  height: auto;
  overflow:hidden;
  background-color: white;
}

.order_details_goods_image{
  float: left;
  width: 22vw;
  height: 22vw;
  border-radius: 1vw;
}

.order_details_goods_desc{
  float: left;
  padding-left: 3vw;
  width: calc(100% - 25vw);
}
.order_details_goods_desc_data{
  padding-top: 2vw;
  color: #969799;
  line-height: 6vw;
  font-size: 3vw;
}

</style>